const path = require('path')
const webpack = require('webpack')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const { CleanWebpackPlugin } = require('clean-webpack-plugin')



module.exports = {
    entry: './src/index.js',
    output: {
        path: path.join(__dirname, 'build'),
        // filename: 'bundle.js'
        filename: "js/[name]-[hash]" + ".js",
        chunkFilename: "js/[name]-[hash]" + ".js",
        publicPath: '/'
    },
    mode: 'development',
    module: {
        rules: [
            {
                test: /\.(js|jsx)$/,
                enforce: 'pre',
                use: [{
                    loader: 'eslint-loader',
                    options: {
                        fix: true,
                        formatter: require('eslint-friendly-formatter')
                    }
                }],
                include: /src/
            },
            {
                test: /\.(js|jsx)$/,
                use: ['babel-loader',
                    {
                        loader: 'eslint-loader',
                        options: {
                            formatter: require('eslint-friendly-formatter'),
                            include: [path.resolve('src')],
                            emitWarning: false
                        }
                    }
                ],
                exclude: /node_modules/
            },
            {
                test: /\.(css|scss|less)/,
                use: ['style-loader', {
                    loader: 'css-loader',
                    options: {
                        // modules: true,
                        // localIdentName: '[path]'
                        //更新后新方法
                        modules: {
                            localIdentName: '[path][name]__[local]--[hash:base64:5]'
                        }
                    }
                }],
                include: path.resolve(__dirname, "src")
            },
            {
                test: /.(png|jpg|jpeg|gif)$/,
                use: [{
                    loader: 'url-loader',
                    options: {
                        limit: 20250
                    }
                }]
            }
        ]
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: path.join(__dirname, '/src/index.html'),
            filename: 'index.html'
        }),
        new CleanWebpackPlugin(),
        new webpack.HotModuleReplacementPlugin(),
        new webpack.NamedModulesPlugin()

    ],
    // devServer: {
    //     contentBase: path.join(__dirname, 'dist'),
    //     compress: true,
    //     open:true,
    //     port: 9000,
    //     hot: true,
    //     quiet: true,
    //     clientLogLevel: 'none',
    //     historyApiFallback: {
    //         disableDotRule: true
    //     }
    // },
    devServer:{
        contentBase: "./", 
        // historyApiFallback:true,
        inline:true,
        hot:true,
        port:9000,
        host:'192.168.10.13',
        open:true
    },
    resolve: {
        extensions: ['.tsx', '.ts', '.js', '.jsx', '.json']
    }
}